<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { throttle } from 'lodash-es';
import LayoutHeader from './LayoutHeader.vue'

const isShowHeader = ref(false)


function windowScrollHandler() {
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  // 缓冲区间：170~190px之间不改变状态
  isShowHeader.value = scrollTop > 50;
}

onMounted(() => { 
  window.addEventListener("scroll", throttle(windowScrollHandler, 100)); // 100ms内只触发一次
});
</script>

<template>
  <!-- 固定背景层 -->
  <div class="global-background">
    <!-- 初始头部（正常滚动） -->
    <div class="header-fixed">
      <LayoutHeader />
    </div>

    <!-- 滚动后显示的固定头部 -->
    <div class="header" v-show="isShowHeader">
      <!-- 这里放你的固定头部内容 -->
    </div>

    <!-- 主内容区 -->
    <div class="main-container">
      <h1>EasyLive</h1>
      <h1>EasyLive</h1>
      <h1>EasyLive</h1>
      <h1>EasyLive</h1>
      <h1>EasyLive</h1>
      <h1>EasyLive</h1>
      <h1>EasyLive</h1>
      <span class="iconfont-cdn icon-bilibili"></span>
      <span class="iconfont-cdn icon-bilibili1"></span>
    </div>
  </div>
</template>

<style scoped>
.global-background {
  width: 100vw;
  min-width: 1250px; /* 统一最小宽度 */
  max-width: 2000px; /* 统一最大宽度 */
  margin: 0 auto;    /* 水平居中 */
  padding: 0;
}

/* 初始头部（相对定位，随页面滚动） */
.header-fixed {
  position: relative;
  width: 100%;
  height: 180px;
  background-image: url(../assets/banner_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 滚动后显示的固定头部 */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 64px;
  background: rgb(236, 168, 168);
  z-index: 100;
}

/* 统一宽度约束 */
.header-fixed,
.header {
  min-width: 1250px;
  max-width: 2000px;
  margin: 0 auto; /* 水平居中 */
  transition: height 0.3s ease;
}

/* 主内容区 */
.main-container {
  width: 80%;
  height: 20000px; /* 防止内容溢出 */
  min-width: 1000px;
  max-width: 1600px;
  margin: 20px auto; /* 水平居中 + 上下边距 */
  padding: 20px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 1250px) {
  .global-background,
  .header-fixed,
  .header {
    min-width: 100%; /* 小于1250px时取消固定宽度 */
    max-width: 100%; /* 允许自由缩放 */
  }

  /* 调整高度 */
  .header-fixed {
    height: 150px;
  }
  .header {
    height: 60px;
  }
}

@media (max-width: 768px) {
  .header-fixed {
    height: 120px;
  }
  .header {
    height: 50px;
  }

  .main-container {
    width: 95%; /* 小屏幕时增加宽度占比 */
    min-width: unset; /* 取消最小宽度限制 */
  }
}
</style>